 <template>
   <div class="left-container">
    <TechBox>
      <div class="left-one">
        <NodeAndDeployChart  
        v-for="(_,key) in nodeAndDeployData" 
        :key="key"
        :isNodeData="key === 'nodeData'"
        v-bind="nodeAndDeployData[key]"
        />
      </div>
    </TechBox>
    <TechBox>
      <div class="left-two">
         <div class="header">
          <span>终端信息</span>
         </div>
         <div class='content'>
            <div class='content-item' v-for="(_,key) in terminalInfoData" :key="key">
                <PieChart 
                :label="terminalInfoData[key].label"
                :useValue="terminalInfoData[key].value"
                />
            </div>
         </div>
      </div>
    </TechBox>
    <TechBox>
      <div class="left-three">
        <NodeInfo 
        v-bind="nodeInfoData"
        />
        <div class="orbit-config">
          <div class="orbit-item cursor-pointer" 
               @click="handleOrbitConfigClick(item)" 
               v-for="(item, index) in orbitConfig" 
               :key="index">
            <div class="orbit-content">
              <img class="orbit-icon" :src="item.img" alt="">
              <span class="orbit-label">{{ item.label }}</span>
            </div>
            <div class="separator" v-if="index < orbitConfig.length - 1">
              <img src="@/assets/imgs/dataScreen/Rectangle.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </TechBox>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Left',
 })
 </script>
 <script setup  lang="ts">
 import { ref, onMounted, inject } from 'vue'
 import NodeAndDeployChart from './nodeAndDeployChart/index.vue'
 import { getTerminalInfoData, setNodeInfoData } from '../data'
 import { OrbitType } from '@/Earth/world/Earth'
 import {nodeManagementApi} from '@/api/nodeManagement'
 import {deployPlatformApi} from '@/api/deployPlatform'
 import leo from '@/assets/imgs/dataScreen/leo.png'
 import Mediumtrack from '@/assets/imgs/dataScreen/Mediumtrack.png'
 import StaticTrack from '@/assets/imgs/dataScreen/StaticTrack.png'
 import { useNodeInfoStore } from '@/stores/nodeInfo'
 import { storeToRefs } from 'pinia'
 import dayjs from 'dayjs'
 import {getWebSocketInstance} from '@/utils/websocketExample'
 const nodeInfoStore = useNodeInfoStore()
 const {nodeInfo} = storeToRefs(nodeInfoStore)
 const terminalInfoData = ref(getTerminalInfoData())
 const nodeInfoData:any= ref({
  id:0,
  ipAddress:'',
  type:0,
  createTime:'',
  cpu:0,
  disk:0,
  memory:0,
  deployTotal:0,
 })
 const centerRef = inject<any>('centerRef')
 // 轨道配置
 const orbitConfig = ref([
   {
     type: OrbitType.LEO,
     img: leo,
     label: '低轨突击层'
   },
   {
     type: OrbitType.MEO,
     img: Mediumtrack,
     label: '中轨警戒层'
   },

   {
     type: OrbitType.GEO,
     img: StaticTrack,
     label: '地球同步轨道'
   }
 ])
 // 当前选中的轨道类型
 const activeOrbitType = ref<string | null>(null)
 // 点击轨道配置项
 function handleOrbitConfigClick(item: any) {
   console.log(item, "item")
   if (!centerRef || !centerRef.value) return
   // 切换轨道显示
   if (activeOrbitType.value === item.type) {
     // 如果已经是选中状态，则显示所有轨道
     activeOrbitType.value = null
     centerRef.value.showOrbitLayer()
   } else {
     // 设置为选中状态，并只显示该轨道
     activeOrbitType.value = item.type 
     centerRef.value.showOrbitLayer(item.type)
   }
 }
 const  nodeAndDeployData:any = ref({
  nodeData:{
    total:0,
    online:0,
    offline:0,
    title:'节点总数'
  },
  deployData:{
    total:0,
    online:0,
    offline:0,
    title:'部署总数'
  }
 })
 async function nodeConditionQuery() {
  const {data} = await nodeManagementApi.postNodeConditionQuery({})
  nodeAndDeployData.value.nodeData.total = data.length
  nodeAndDeployData.value.nodeData.online = data.filter((item:any) => item.connectionStatus === 1).length
  nodeAndDeployData.value.nodeData.offline = data.filter((item:any) => item.connectionStatus === 0).length
  nodeAndDeployData.value.nodeData.title = '节点总数'
 }
 async function getDeployPlatformCount() {
  const {data} = await deployPlatformApi.getDeployPlatformCount()
  nodeAndDeployData.value.deployData.total = data.totalNum
  nodeAndDeployData.value.deployData.online = data.deployNum
  nodeAndDeployData.value.deployData.offline = data.ndNum
  nodeAndDeployData.value.deployData.title = '部署总数'
 }

// 根据节点ID获取节点信息
async function  postNodeConditionQuery(id:string) {
  const {data} = await nodeManagementApi.postNodeConditionQuery({nodeId:id})
  const firstItem = data[0]
  console.log(firstItem, "firstItem");
  console.log(data, "data");
  nodeInfoData.value.id = firstItem.nodeId
  nodeInfoData.value.ipAddress = firstItem.ipAddress
  nodeInfoData.value.type=firstItem.type
  nodeInfoData.value.createTime = dayjs(firstItem.createdTime).format('YYYY-MM-DD HH:mm:ss')
  console.log(nodeInfoData.value, "nodeInfoData");
  nodeManagementApi.getNodeCpuAndMem({ips:[firstItem.ipAddress]})
}
 watch(nodeInfo, (newVal) => {
  postNodeConditionQuery(newVal.nodeId)
 }, {deep:true})
 const fetchTasks = [
  {fn:nodeConditionQuery,name:"获取节点信息"},
  {fn:getDeployPlatformCount,name:"获取部署数量"},
 ]
 async function init() {
  const results = await Promise.allSettled(
    fetchTasks.map(task => task.fn())
  )  
  results.forEach((result, index) => {
    if (result.status === 'rejected') {
      console.error(`获取${fetchTasks[index].name}失败:`, result.reason)
    }
  })
}
const wsResponseHandler:any = {
  "JRLC.get.cpu":handleGetCpu,
}
function handleGetCpu(data:any){
  if(data.ipAddress !== nodeInfoData.value.ipAddress) return
  nodeInfoData.value.cpu = data.cpu | 0
  nodeInfoData.value.disk = data.meu|| 0
  nodeInfoData.value.memory = Math.floor(Math.random() * 100)
  nodeInfoData.value.deployTotal = Math.floor(Math.random() * 100)
}
let wsClient = getWebSocketInstance()
wsClient.on("message",(responseData:any)=>{
  const {data,cmd} = responseData
  if(!Object.keys(wsResponseHandler).includes(cmd)) return
  wsResponseHandler[cmd](data)
})
 onMounted(() => {
  init()
   setInterval(() => {
     terminalInfoData.value = getTerminalInfoData()
   }, 2000)
 })
 </script>
 
<style  lang="scss" scoped>
.left-container{
  width: 100%;
  height: 100%;
  padding-left: 10px;
  .left-one{
    width: 100%;
    height: 257px;
    border-radius: 4px 4px 4px 4px;
   padding: 16px;
    display: flex;
    justify-content:space-between;
    // background: rgba(0,10,10,0.5);
    align-items:center;
    gap: 10px;
  }
  .left-two{
    width: 100%;
    height: 257px;
    // background: rgba(0,10,10,0.5);
    border-radius: 4px 4px 4px 4px;
    margin-top: 10px;
    padding: 14px;
    .header{
     background-image: url('@/assets/imgs/dataScreen/left-bg1.png');
     height: 38px;
     display: flex;
     align-items: center;
     span{
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;;
    text-shadow: 0px 0px 9px rgba(60,235,255,0.7);
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 20px;
     }
    }
    .content{
      display: flex;
      justify-content:space-between;
      align-items:center;
      margin-top: 20px;
      // width: 100%;
      .content-item{
        width: 30%;
        height: 150px;
        // background: #133651;
        border-radius: 4px 4px 4px 4px;
      }
    }
  }
  .left-three{
    width: 100%;
    height: 400px;
    // background: rgba(0,10,10,0.5);
    border-radius: 4px 4px 4px 4px;
    margin-top: 10px;
  
  }
}

.orbit-config {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  
  .orbit-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
    
    &:hover {
      background: rgba(60, 235, 255, 0.1);
    }
    
    .orbit-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .orbit-icon {
        width: 40px;
        height: 39px;
      }
      
      .orbit-label {
        color: #CFF4EE;
        font-size: 13px;
        margin-top: 5px;
      }
    }
    
    .separator {
      margin: 0 15px;
      height: 60px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
 